import React, {useState} from 'react'
import {useAuth, useMount} from "utils";
import TabNav from "components/navs/tabNav";
import LeftNav from "components/navs/leftNav";
import styled from "@emotion/styled";
import RootRoutes from 'router/index';
import {FullPageLoading} from "components/lib";

export interface changeTabNavType {
    (key?: string): void
}


export default function Home() {
    const {menu} = useAuth()
    const [leftList, setLeftList] = useState([])
    const changeTabNav: changeTabNavType = (key = 'grid') => {
        setLeftList((menu.find(item => item.code === key))?.children)
    }
    useMount(() => changeTabNav())

    return (
        <>
            <Contain>
                <LeftNav list={leftList}/>
                <div style={{flex: 1}}>
                    <ContainTop>
                        <TabNav list={menu} changeTabNav={changeTabNav}/>
                    </ContainTop>
                    <React.Suspense fallback={<FullPageLoading/>}>
                        <Container>
                            <RootRoutes/>
                        </Container>
                    </React.Suspense>
                </div>
            </Contain>
        </>
    );
};

const Contain = styled.div`
  display: flex;
`
const ContainTop = styled.div`
  display: flex;
  height: 4.5rem;
  background-color: #001529;
  color: white;
`
const Container = styled.div`
  padding: 2rem;
  background-color: #eff2f7;
`